<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>todos-Vue</title>
    <script src="vue.js"></script>
    <style>
      ul,li {list-style: none; padding: 0;}
      li { padding-bottom: 10px;}
      .active {
        border-radius: 50%;
        border: solid 1px #ccc;
        display: inline-block;
        width: 18px; height: 18px;
        vertical-align: top
      }
      .selet {
        text-decoration:line-through
      }
      .selet .active {
        background: #f00;
      }
    </style>
  </head>
  <body>
    <!-- html 模块 -->
    <div id="app">
      
        <input type="text" v-model="inputText" @keyup.enter="add">
        <ul>
          <li v-for="i,index in showData" :class="{ selet: i.state }">
            {{index}}.<div class="active" @click="activated(index)"></div>
            {{i.text}}
          </li>
        </ul>
        <p>  一共有{{showData.length}}个代办项目</p>
        <button @click="showList('allList')">所有列表</button>
        <button @click="showList('activatList')">进行中</button>
        <button @click="showList('completeList')">已完成</button>
        <button @click="del">清空</button>

        <div style="padding:10px; border:1px solid #ccc;margin:10px;">
            <p>{{inputText}}</p>
            <p>展示数据：{{showData}}</p>
            <p>所有数据：{{all}}</p>
          </div>

          
    </div>
    <!-- js模块 -->
    <script>
     var app = new Vue({
      el: '#app',
      data:{
        showData:[],
        all:[ { "state": false, "text": "122" }, { "state": false, "text": "123123" }, { "state": false, "text": "12321321" }, { "state": false, "text": "12321321" }, { "state": false, "text": "12321321" }],
        inputText:'',
        selet:false
      },
      created: function () {
        this.showData = this.all
      },
      methods:{
        add:function(){
          this.all.push({state:false,text:this.inputText})
          this.inputText = ""
        },
        activated (index) {
          this.all[index].state = !this.all[index].state
        
        },
        allList () {
          return this.all
        },
        activatList () {
          return this.all.filter(function(i){
            return !i.state
          })
        },
        completeList() {
          return this.all.filter(function(i){
            return i.state
          })
        },
        showList(d){
          this.showData = this[d]()
        },
        del(){
          this.all = []
          this.showData = this.all

        }
      }
    })
    </script>
  </body>
</html>